﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css"/>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css"/>
    <link rel="stylesheet" type="text/css" href="../css/verify.css">
</head>
<body class="index">
<div class="login_box">
    <table>
        <tr>
            <td class="login_info">账号：</td>
            <td colspan="2"><input name="username" type="text" class="width150" id="username"/></td>
            <td class="login_error_info"><span id="user_msg" class="required"></span></td>
        </tr>
        <tr>
            <td class="login_info">密码：</td>
            <td colspan="2"><input name="password" type="password" class="width150" id="password"/></td>
            <td><span class="required" id="pwd_msg"></span></td>
        </tr>
        <tr>
            <td class="login_info">验证码：</td>
            <td colspan="2">
                <div id="mpanel2"></div>
            </td>
            <td></td>
            <!--<td><span class="required">验证码错误</span></td>-->
        </tr>
        <tr>
            <td></td>
            <td class="login_button" colspan="2" id="button">
                <a href="/index" id="submit"><img src="../images/login_btn.png"/></a>
            </td>
            <td><span class="required">用户名或密码错误，请重试</span></td>
        </tr>
    </table>
</div>


<script src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/verify.js"></script>
<script>
    //检查账号是否为空
    function checkUsername() {
        if ($("#username").val() == "") {
            $("#user_msg").text("账号不能为空,30长度的字母、数字和下划线");
            return false;
        } else {
            $("#user_msg").text("");
            return true;
        }
    }
    //检查密码是否为空
    function checkPwd() {
        if ($("#password").val() == "") {
            $("#pwd_msg").text("密码不能为空,30长度的字母、数字和下划线");
            return false;
        } else {
            $("#pwd_msg").text("");
            return true;
        }
    }
    $("#button").click(function () {
        $.ajax({
            url: "/loginsubmit",
            type: "post",
            data: {
                username: $("#username").val(),
                password: $("#password").val()
            },
            success: function (data) {
                window.href.location = "/index";
            }

        });
        //$("#myform").submit();
    });
    $(function () {
        $("#submit").click(function () {
            var b = checkUsername() && checkPwd() && verifyCode();
            if (b) {
                $("#form1").submit();
            }
        });
    });

    /*$('#mpanel2').codeVerify({
     type: 1,
     width: '100px',
     height: '25px',
     fontSize: '15px',
     codeLength: 1,
     btnId: 'check-btn',
     ready: function () {
        },
     success: function () {
     $.ajax({
     url: "/loginsubmit",
     type: "post",
     data: {
     username: $("#username").val(),
     password: $("#password").val()
     },
     success: function (data) {
     window.href.location = "/index";
     }
     });
        },
     error: function () {
            alert('验证码不匹配！');
        }
    });*/

</script>
</body>
</html>
